<!-- WebComponent example based off element-boilerplate: https://github.com/webcomponents/element-boilerplate -->
<template>
    <style> 
        .weui-switch {
          -webkit-appearance: none;
                  appearance: none;
        }
        .weui-switch,
        .weui-switch-cp__box {
          position: relative;
          width: 52px;
          height: 32px;
          border: 1px solid #DFDFDF;
          outline: 0;
          border-radius: 16px;
          box-sizing: border-box;
          background-color: #DFDFDF;
          -webkit-transition: background-color 0.1s, border 0.1s;
          transition: background-color 0.1s, border 0.1s;
        }
        .weui-switch:before,
        .weui-switch-cp__box:before {
          content: " ";
          position: absolute;
          top: 0;
          left: 0;
          width: 50px;
          height: 30px;
          border-radius: 15px;
          background-color: #FDFDFD;
          -webkit-transition: -webkit-transform 0.35s cubic-bezier(0.45, 1, 0.4, 1);
          transition: -webkit-transform 0.35s cubic-bezier(0.45, 1, 0.4, 1);
          transition: transform 0.35s cubic-bezier(0.45, 1, 0.4, 1);
          transition: transform 0.35s cubic-bezier(0.45, 1, 0.4, 1), -webkit-transform 0.35s cubic-bezier(0.45, 1, 0.4, 1);
        }
        .weui-switch:after,
        .weui-switch-cp__box:after {
          content: " ";
          position: absolute;
          top: 0;
          left: 0;
          width: 30px;
          height: 30px;
          border-radius: 15px;
          background-color: #FFFFFF;
          box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
          -webkit-transition: -webkit-transform 0.35s cubic-bezier(0.4, 0.4, 0.25, 1.35);
          transition: -webkit-transform 0.35s cubic-bezier(0.4, 0.4, 0.25, 1.35);
          transition: transform 0.35s cubic-bezier(0.4, 0.4, 0.25, 1.35);
          transition: transform 0.35s cubic-bezier(0.4, 0.4, 0.25, 1.35), -webkit-transform 0.35s cubic-bezier(0.4, 0.4, 0.25, 1.35);
        }
        .weui-switch:checked,
        .weui-switch-cp__input:checked ~ .weui-switch-cp__box {
          border-color: #04BE02;
          background-color: #04BE02;
        }
        .weui-switch:checked:before,
        .weui-switch-cp__input:checked ~ .weui-switch-cp__box:before {
          -webkit-transform: scale(0);
                  transform: scale(0);
        }
        .weui-switch:checked:after,
        .weui-switch-cp__input:checked ~ .weui-switch-cp__box:after {
          -webkit-transform: translateX(20px);
                  transform: translateX(20px);
        }
        .weui-switch-cp__input {
          position: absolute;
          left: -9999px;
        }
        .weui-switch-cp__box {
          display: block;
        }

    </style>

    <div><input class="weui-switch" type="checkbox" checked></div>

</template>
<script>
    (function() {
        // Creates an object based in the HTML Element prototype
        var element = Object.create(HTMLElement.prototype); 
        // Fires when an instance of the element is created
        var nodeDocument = document.currentScript.ownerDocument;
        element.createdCallback = function() {
            // Gets content from <template>  
            var template = nodeDocument.querySelector('template').content;
            // Creates the shadow root
            var shadowRoot = this.createShadowRoot();
            // Adds a template clone into shadow root
            var clone = document.importNode(template, true); 

            //console.log(shadowRoot.)
            shadowRoot.appendChild(clone);
        };
        document.registerElement('wx-switch', {
            prototype: element
        });
    }());
</script>